<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>探探scrollIntoView</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            height: 100%;
            background: #fefefe;
        }
        .buttons {
            width: 100%;
            background-color: beige;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 140px;
            align-content: space-around;
        }
        .buttons a{
            display: block;
            width: 30%;
            height: 30px;
            background: #3cbaff;
            color: #fff;
            text-align: center;
            line-height: 30px;
            border-radius: 100px;
            text-decoration: none;
            font-size: 14px;
        }
        .wrapper {
            width: 100%;
            height: calc(100% - 140px);
            background-color: blanchedalmond;
            overflow: scroll;
        }
        .element {
            height: 3000px;
            position: relative;
        }
        .block {
            width: 80%;
            height: 60px;
            background-color: red;
            line-height: 60px;
            text-align: center;
            font-size: 24px;
            font-weight: bolder;
            color: #fff;
            position: absolute;
            top: 1000px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="buttons">
        <a href="javascript:void(0)">1</a>
        <a href="javascript:void(0)">2</a>
        <a href="javascript:void(0)">3</a>
        <a href="javascript:void(0)">4</a>
        <a href="javascript:void(0)">5</a>
        <a href="javascript:void(0)">6</a>
        <a href="javascript:void(0)">7</a>
        <a href="javascript:void(0)">8</a>
        <a href="javascript:void(0)">true</a>
        <a href="javascript:void(0)">false</a>
    </div>
    <div class="wrapper">
        <div class="element">
            <div class="block">
                Block
            </div>
        </div>
    </div>
</div>
<script>
    const options = {
        '2': true,
        '3': {
            behavior: 'auto',
            block: 'start'
        },
        '4': {
            behavior: 'auto',
            block: 'end'
        },
        '5': {
            behavior: 'instant',
            block: 'start'
        },
        '6': {
            behavior: 'instant',
            block: 'end'
        },
        '7': {
            behavior: 'smooth',
            block: 'start'
        },
        '8': {
            behavior: 'smooth',
            block: 'end'
        }
    }
    const as = document.querySelectorAll('a')
    const block = document.querySelector('.block')
    for (let i = 0; i < as.length - 2; i++) {
        const el = as[i]
        el.addEventListener('click', function() {
            console.log(el.textContent, options[el.textContent])
            i === 0 ? block.scrollIntoView() : block.scrollIntoView(options[el.textContent])
        }, false)
    }
    for (let i = as.length - 2; i < as.length; i++) {
        const el = as[i]
        el.addEventListener('click', function() {
            console.log(JSON.parse(el.textContent))
            block.scrollIntoViewIfNeeded(JSON.parse(el.textContent));
        }, false)
    }
</script>
</body>
</html>